<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>拍卖后台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
{#        <link rel="stylesheet" href="{% static 'publc/datetimepicker/bootstrap-datetimepicker.min.css' %}">#}
    <style>
        input[type='file'] {
            min-height: 34px;
        }
    </style>
</head>
<body>

<div style="text-align: center;border: 1px solid olivedrab;width: 520px;margin: 0 auto">
    <form id="itemForm">
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                <span style="color: red;">{{ field.errors.0 }}</span>
            </div>
        {% endfor %}
    </form>


    <a class="btn btn-success btn-xs" id="btnAuctionItem">
        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> 保 存
    </a>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

{#<script src="{% static 'publc/datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>#}
{#<script src="{% static 'publc/datetimepicker/bootstrap-datetimepicker.zh-CN.js' %}"></script>#}
<script>
    let ITEM_ADD = "{% url 'auction_item_add' pk=auction_object.id %}"
    $(function () {
        addAuctionItem();
    });

    // 基本数据提交
    function addAuctionItem() {

        $("#btnAuctionItem").click(function () {
            // 自动把数据，以合适的方式进行添加到FormData里面，
            // 注意1：radio，checkbox，如果未选中，不会提交到后台
            // 注意2：csrf_token也会自动提交到后台，免除了认证
            var AuctionItemData = new FormData($('#itemForm')[0]);
            $.ajax({
                url: ITEM_ADD,
                type: "POST",
                data: AuctionItemData,
                dataType: "JSON",     // 对于返回来的数据，进行反序列化，ajax本身自带反序列化，但是加上他保险
                contentType: false,  // 让浏览器不要对你的数据进行任何的操作
                processData: false, // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
                success: function (res) {
                    if (res.status === 201) {
                        window.location.href = location.href
                    } else {

                    }
                }
            })
        })
    }
</script>

</body>
</html>